<template>
  <div class="record-container">
    <span class="_before">还箱记录详情</span>
    <el-row class="marginTop20">
      <el-col :span="5" class="text-right">还箱单号：</el-col>
      <el-col :span="16">{{ rowData.returnBoxNo }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">订单号：</el-col>
      <el-col :span="16">{{ rowData.orderNo }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">堆场名称：</el-col>
      <el-col :span="16">{{ rowData.yardName }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">箱号：</el-col>
      <el-col :span="16">{{ rowData.containerNo }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">箱型：</el-col>
      <el-col :span="16">{{ boxTypeFilter(rowData.boxType) }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">还箱日期：</el-col>
      <el-col :span="16">{{ formatDate(rowData.returnDate, 2) }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">超期天数：</el-col>
      <el-col :span="16">{{ rowData.overdueDays }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">超期费用：</el-col>
      <el-col :span="16">{{ rowData.overdueAmount }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">状态：</el-col>
      <el-col :span="16">{{ { 5: '未还', 10: '已还' }[rowData.status] }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">备注：</el-col>
      <el-col :span="16">{{ rowData.remark }}</el-col>
    </el-row>
    <el-row class="marginTop10">
      <el-col :span="5" class="text-right">还箱凭证：</el-col>
      <el-col :span="16">
        <showFile :detailFileList="rowData.detailFileList"></showFile>  
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import { formatDate } from '@/utils'
import showFile from '@/components/upload/showFile.vue'
import { onActivated, ref,nextTick } from 'vue'
import { versions } from 'process'
const props = defineProps({
  // rowData: {
  //   type: Object,
  //   default: () => { }
  // }
})
const rowData=ref({})
const detailFileListInfo = ref([])
const openBox = (info) => {
  rowData.value=info
  if(info.detailFileList){
    detailFileListInfo.value = JSON.parse(info.detailFileList)
    console.log('detailFileListInfo.value',detailFileListInfo.value)
  } 
}
//过滤
const boxTypeFilter = (val: any) => {
  let result = ''
  const boxConditionList = [{ value: 5, label: '40HQ' }, { value: 10, label: '40GP' }, { value: 15, label: '20HQ' }, { value: 20, label: '20GP' }]
  boxConditionList.forEach((item: { value: any; label: any; }) => {
    if (item.value == val) {
      result = item.label
    }
  })
  return result
}

defineExpose({
    openBox
})
</script>
<style lang="scss" scoped>
.upload-img{
    :deep(.el-upload--picture-card) {
      display: none !important
    }
  }
</style>
